<template>
  <view class="container">
    <block v-if="isload">
      <view
        class="custom-nav"
        :style="{ top: customNavTop + 'px', height: customNavHeight + 'px' }"
      >
        <view
          class="search-container"
          :style="{ marginTop: statusBarHeight + 'px' }"
        >
          <view
            class="search-box"
            @tap.stop="goto"
            :data-url="'/pages/shop/search?bid=' + bid"
          >
            <image class="img" src="/static/img/search-icon2.png"></image>
            <view class="search-text">请输入搜索商品</view>
          </view>
        </view>
      </view>

      <view class="content-container">
        <view
          class="mask"
          v-if="showPopup"
          @tap.stop="showPopup = false"
        ></view>
        <view class="nav-tabs-box">
          <scroll-view scroll-x class="nav-tabs" :scroll-left="scrollLeft">
            <!-- 添加全部选项 -->
            <view
              class="tab-item"
              :class="currentTab == -1 ? 'active' : ''"
              @tap="switchAllTab"
            >
              <image
                class="tab-icon"
                :src="static_url + '/static/img/all_product.jpg'"
                mode="aspectFill"
                :style="{
                  border:
                    currentTab == -1
                      ? `2px solid ${t('color2')}`
                      : '2px solid #fff',
                  borderRadius: '50%',
                }"
              ></image>
              <text
                class="tab-text"
                :style="{
                  background: currentTab === -1 ? t('color2') : '',
                  color: currentTab === -1 ? '#fff' : '#333',
                }"
                >全部</text
              >
            </view>
            <view
              v-for="(item, index) in clist"
              :key="index"
              :class="'tab-item ' + (currentTab === index ? 'active' : '')"
              @tap="switchTab(item, index)"
              :data-id="item.id"
            >
              <image
                class="tab-icon"
                :src="item.pic"
                mode="aspectFill"
                :style="{
                  border:
                    currentTab === index
                      ? `2px solid ${t('color2')}`
                      : '2px solid #fff',
                  borderRadius: '50%',
                }"
              >
              </image>

              <text
                class="tab-text"
                :style="{
                  background: currentTab === index ? t('color2') : '',
                  color: currentTab === index ? '#fff' : '#333',
                }"
              >
                {{ item.name }}
              </text>
            </view>
          </scroll-view>
          <view class="show-box">
            <view class="show-box-flex" @tap="openshow">
              <view class="show-text">
                <text>展</text>
                <text>开</text>
              </view>
              <image
                class="show-img"
                src="/static/img/show-list.png"
                mode=""
              ></image>
            </view>
          </view>
          <view class="popup-layer" v-if="showPopup">
            <view class="popup-content">
              <view
                class="popup-item"
                :class="currentTab == -1 ? 'active' : ''"
                @tap="switchAllTab"
              >
                <image
                  class="popup-icon"
                  :src="static_url + '/static/img/all_product.jpg'"
                  mode="aspectFill"
                  :style="{
                    border:
                      currentTab == -1 ? `2px solid ${t('color2')}` : 'none',
                    borderRadius: '50%',
                  }"
                ></image>
                <text
                  class="popup-text"
                  :style="{
                    background: currentTab === -1 ? t('color2') : '',
                    color: currentTab === -1 ? '#fff' : '#333',
                  }"
                  >全部</text
                >
              </view>
              <view
                v-for="(item, index) in clist"
                :key="index"
                class="popup-item"
                @tap="switchTab(item, index)"
              >
                <image
                  class="popup-icon"
                  :src="item.pic"
                  :style="{
                    border:
                      currentTab === index
                        ? `2px solid ${t('color2')}`
                        : 'none',
                    borderRadius: '50%',
                  }"
                  mode="aspectFill"
                ></image>
                <text
                  class="popup-text"
                  :style="{
                    background: currentTab === index ? t('color2') : '',
                    color: currentTab === index ? '#fff' : '#333',
                  }"
                  >{{ item.name }}</text
                >
              </view>
            </view>
            <view class="popup-bottom" @tap="openshow">
              点击收起<image
                class="arrow-top"
                src="/static/img/arrowdown.png"
                mode=""
              ></image>
            </view>
          </view>
        </view>
        <view class="content-container-box">
          <view class="nav_left">
            <view
              :class="'nav_left_items ' + (curIndex == -1 ? 'active' : '')"
              :style="{ color: curIndex == -1 ? t('color2') : '#333' }"
              @tap="switchRightTab"
              data-index="-1"
              :data-id="clist[currentTab] ? clist[currentTab].id : 0"
            >
              <view class="before" :style="{ background: t('color2') }"></view
              >全部
            </view>
            <block v-if="currentTab == -1">
              <view v-for="(item, index) in clist" :key="index">
                <view
                  :class="
                    'nav_left_items ' + (curIndex == index ? 'active' : '')
                  "
                  :style="{ color: curIndex == index ? t('color2') : '#333' }"
                  @tap="switchRightTab"
                  :data-index="index"
                  :data-id="item.id"
                >
                  <view
                    class="before"
                    :style="{ background: t('color2') }"
                  ></view
                  >{{ item.name }}
                </view>
              </view>
            </block>
            <block v-else>
              <view v-for="(item, index) in selectedItem" :key="index">
                <view
                  :class="
                    'nav_left_items ' + (curIndex == index ? 'active' : '')
                  "
                  :style="{ color: curIndex == index ? t('color2') : '#333' }"
                  @tap="switchRightTab"
                  :data-index="index"
                  :data-id="item.id"
                >
                  <view
                    class="before"
                    :style="{ background: t('color2') }"
                  ></view
                  >{{ item.name }}
                </view>
              </view>
            </block>

            <view
              v-show="tabflag"
              style="height: 200rpx; display: block"
            ></view>
          </view>
          <view class="nav_right">
            <view class="nav_right-content">
              <!-- <view class="nav-img" v-if="categoryimg">
							<image :src="categoryimg"></image>
						</view> -->
              <view class="nav-pai">
                <view
                  class="nav-paili"
                  :style="
                    !field || field == 'sort' ? 'color:' + t('color2') : ''
                  "
                  @tap="changeOrder"
                  data-field="sort"
                  data-order="desc"
                  >综合</view
                >
                <view
                  class="nav-paili"
                  :style="field == 'sales' ? 'color:' + t('color2') : ''"
                  @tap="changeOrder"
                  data-field="sales"
                  data-order="desc"
                  >销量</view
                >
                <view
                  class="nav-paili"
                  @tap="changeOrder"
                  data-field="sell_price"
                  :data-order="order == 'asc' ? 'desc' : 'asc'"
                >
                  <text
                    :style="field == 'sell_price' ? 'color:' + t('color2') : ''"
                    >价格</text
                  >
                  <text
                    class="iconfont iconshangla"
                    :style="
                      field == 'sell_price' && order == 'asc'
                        ? 'color:' + t('color2')
                        : ''
                    "
                  ></text>
                  <text
                    class="iconfont icondaoxu"
                    :style="
                      field == 'sell_price' && order == 'desc'
                        ? 'color:' + t('color2')
                        : ''
                    "
                  ></text>
                </view>

                <!-- 惊艳度 -->
                <view
                  class="nav-paili"
                  :style="field == 'amazing' ? 'color:' + t('color2') : ''"
                  @tap="changeOrder"
                  data-field="amazing"
                  data-order="desc"
                  >惊艳度</view
                >

                <!-- 新品 -->
                <view
                  class="nav-paili"
                  :style="field == 'is_new' ? 'color:' + t('color2') : ''"
                  @tap="changeOrder"
                  data-field="is_new"
                  data-order="desc"
                  >新品</view
                >
              </view>
              <view
                class="classify-ul"
                v-if="
                  currentTab == -1 &&
                  curIndex > -1 &&
                  clist[curIndex].child.length > 0
                "
              >
                <view
                  class="flex"
                  style="width: 100%; overflow-y: hidden; overflow-x: scroll"
                >
                  <view
                    class="classify-li"
                    :style="
                      curIndex2 == -1
                        ? 'color:' +
                          t('color2') +
                          ';background:rgba(' +
                          t('color2rgb') +
                          ',0.2)'
                        : ''
                    "
                    @tap="changeCTab"
                    :data-id="clist[curIndex].id"
                    data-index="-1"
                    >全部</view
                  >
                  <block
                    v-for="(item, idx2) in clist[curIndex].child"
                    :key="idx2"
                  >
                    <view
                      class="classify-li"
                      :style="
                        curIndex2 == idx2
                          ? 'color:' +
                            t('color2') +
                            ';background:rgba(' +
                            t('color2rgb') +
                            ',0.2)'
                          : ''
                      "
                      @tap="changeCTab"
                      :data-id="item.id"
                      :data-index="idx2"
                      >{{ item.name }}
                    </view>
                  </block>
                </view>
              </view>
              <scroll-view
                class="classify-box"
                scroll-y="true"
                @scrolltolower="scrolltolower"
              >
                <view class="product-itemlist">
                  <view
                    class="item"
                    v-for="(item, index) in processedList"
                    :key="item.id"
                    :class="item.stock <= 0 ? 'soldout' : ''"
                  >
                    <block v-if="item.sceneopen == 1">
                      <image
                        class="product-pic2"
                        :src="item.scenepic.pics"
                        mode="widthFix"
                      />
                    </block>

                    <block v-if="item.sceneopen == 0">
                      <view
                        class="product-pic"
                        :data-url="'/pages/shop/product?id=' + item.id"
                        @click="goto"
                      >
                        <image class="image" :src="item.pic" mode="widthFix" />
                        <view class="overlay">
                          <view class="text">售罄</view>
                        </view>
                      </view>
                      <view
                        class="product-info"
                        :data-url="'/pages/shop/product?id=' + item.id"
                        @click="goto"
                      >
                        <view class="p1"
                          ><text>{{ item.name }}</text></view
                        >
                        <view class="p1-sp"
                          ><text>{{ item.sellpoint }}</text></view
                        >
                        <view
                          class="p1-degree"
                          v-if="
                            item.amazing != null && item.amazing != undefined
                          "
                        >
                          <text
                            v-if="shopset.hide_sales == 0"
                            style="margin-right: 10rpx"
                            >已售{{ item.sales }}件</text
                          ><text>惊艳度{{ item.amazing }}%</text>
                        </view>
                        <view
                          class="coupon-box"
                          v-if="item.couponlist.length > 0"
                        >
                          <view
                            class="coupon-item-box"
                            :style="{ border: `2rpx solid ${t('color2')}` }"
                            v-for="(item, index) in item.couponlist.slice(0, 2)"
                            :key="index"
                          >
                            <view class="coupon-left" v-if="item.type == 1">
                              商品券
                            </view>
                            <view class="coupon-left" v-if="item.type == 41">
                              新人券
                            </view>

                            <view class="coupon-right">
                              {{ item.name }}
                            </view>
                          </view>
                        </view>
                        <!-- <view class="p3" v-if="shopset.hide_sales == 0">
													<view class="p3-1"><text>已售{{ item.sales }}件</text></view>
												</view> -->

                        <view class="p22-flex">
                          <view
                            class="p22"
                            style="display: flex"
                            v-if="
                              item.price_show_type == '0' ||
                              !item.price_show_type
                            "
                          >
                            <!--  <view
                              class="p2"
                              v-if="item.price_type != 1 || item.sell_price > 0"
                            >
                              <text
                                class="t2"
                                v-if="
                                  item.market_price * 1 > item.sell_price * 1
                                "
                                >原价￥{{ item.market_price }}</text
                              >
                            </view> -->
                            <view
                              class="p2"
                              v-if="item.price_type != 1 || item.sell_price > 0"
                              style="
                                display: flex;
                                flex-direction: column;
                                height: auto;
                              "
                            >
                            <view v-if="memberinfo.is_vip && item.common_min_price">

                            <view>  <text
                                  class="t1"
                                  :style="{ color: t('color2') }"
                                >
                                  <text
                                    style="
                                      font-size: 20rpx;
                                      padding-right: 1px;
                                      color: #9a9a9a;
                                    "
                                    >代理价</text
                                  >
                                  <text
                                    style="font-size: 20rpx; padding-right: 1px"
                                    >￥</text
                                  >{{ item.sell_price }}
                                </text>  </view>
                             
                              <view>
                               <text
                                  class="t1"
                                  :style="{ color: t('color2') }"
                                >
                                  <text
                                    style="
                                      font-size: 20rpx;
                                      padding-right: 1px;
                                      color: #9a9a9a;
                                    "
                                    >销售价</text
                                  >
                                  <text
                                    style="font-size: 20rpx; padding-right: 1px"
                                    >￥</text
                                  >{{ item.common_min_price }}
                                </text> 
                              </view>
							  
                            </view>
	
                            <view v-else>
                              <text class="t1" :style="{ color: t('color2') }">
                                <text
                                  style="
                                    font-size: 20rpx;
                                    padding-right: 1px;
                                    color: #9a9a9a;
                                  "
                                  >销售价</text
                                >
                                <text
                                  style="font-size: 20rpx; padding-right: 1px"
                                  >￥</text
                                >{{ item.sell_price }}
                              </text>
                            </view>
                          </view>
						  
                          <view
                            class="p22"
                            v-if="
                              item.price_show_type == '1' ||
                              item.price_show_type == '2'
                            "
                          >
                            <view v-if="item.is_vip == '0'">
                              <view
                                class="p2"
                                v-if="
                                  item.price_type != 1 || item.sell_price > 0
                                "
                              >
                                <text class="t1" :style="{ color: t('color2') }"
                                  ><text
                                    style="padding-right: 1px; font-size: 20rpx"
                                    >￥</text
                                  >
                                  <text style="font-size: 32rpx">{{
                                    item.sell_price
                                  }}</text>
                                </text>
                                <text
                                  class="t2"
                                  v-if="
                                    item.market_price * 1 > item.sell_price * 1
                                  "
                                  >￥{{ item.market_price }}</text
                                >
                              </view>
							</view>
                              <view
                                class="flex"
                                v-if="
                                  item.price_show_type == '2' &&
                                  item.lvprice == 1
                                "
                              >
                                <view
                                  class="member flex"
                                  :style="'border-color:' + t('color2')"
                                >
                                  <view
                                    :style="{ background: t('color2') }"
                                    class="member_lable flex-y-center"
                                  >
                                    {{ item.level_name_show }}
                                  </view>
                                  <view
                                    :style="'color:' + t('color2')"
                                    class="member_value flex-y-center"
                                  >
                                    ￥<text>{{ item.sell_price_origin }}</text>
                                  </view>
                                </view>
                              </view>
                            </view>
							<!-- 以新逻辑为准 -->
                            <view style="display: none;" v-if="item.is_vip == '1'">
                              <view class="flex" v-if="item.lvprice == 1">
                                <view
                                  class="member flex"
                                  :style="'border-color:' + t('color2')"
                                >
                                  <view
                                    :style="{ background: t('color2') }"
                                    class="member_lable flex-y-center"
                                  >
                                    {{ item.level_name_show }}
                                  </view>
                                  <view
                                    :style="'color:' + t('color2')"
                                    class="member_value flex-y-center"
                                  >
                                    ￥<text style="font-size: 32rpx">{{
                                      item.sell_price
                                    }}</text>
                                  </view>
                                </view>
                              </view>
                              <view
                                class="p2"
                                v-if="
                                  item.price_type != 1 || item.sell_price > 0
                                "
                              >
                                <text class="t1" :style="{ color: t('color2') }"
                                  ><text
                                    style="font-size: 20rpx; padding-right: 1px"
                                    >￥</text
                                  >
                                  <text
                                    :style="
                                      item.lvprice == '1'
                                        ? 'font-size:26rpx;'
                                        : 'font-size:32rpx;'
                                    "
                                    >{{ item.sell_price_origin }}</text
                                  >
                                </text>
                                <text
                                  class="t2"
                                  v-if="
                                    item.market_price * 1 > item.sell_price * 1
                                  "
                                  >￥{{ item.market_price }}</text
                                >
                              </view>
                            </view>
                          </view>

                          <view
                            class="add-cart"
                            :style="{ background: t('color2') }"
                          >
                            +
                          </view>
                        </view>
                        <view
                          class="bottom-list"
                          v-if="item.ranktxt"
                          @click.stop="toSales(item)"
                        >
                          <image
                            class="bottom-list-icon"
                            src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250409/d2dbfe9d52d6e738888700bdadafeb42.png"
                            mode=""
                          ></image>
                          <text class="bottom-list-text">{{
                            item.ranktxt
                          }}</text>
                          <image
                            class="bottom-list-icon"
                            src="/static/img/arrowright.png"
                            mode=""
                          ></image>
                        </view>
                      </view>
                    </block>
                  </view>
                </view>
                <nomore text="上拉至下一个分类" v-if="nomore"></nomore>
                <nodata text="暂无相关商品" v-if="nodata"></nodata>
                <view style="width: 100%; height: 140rpx"></view>
              </scroll-view>
            </view>
          </view>
        </view>
      </view>
      <buydialog
        v-if="buydialogShow"
        :proid="proid"
        @buydialogChange="buydialogChange"
        :menuindex="menuindex"
      >
      </buydialog>
      <view class="posterDialog linkDialog" v-if="showLinkStatus">
        <view class="main">
          <view class="close" @tap="showLinkChange">
            <image class="img" src="/static/img/close.png" />
          </view>
          <view class="content">
            <view class="title">{{ lx_name }}</view>
            <view class="row" v-if="lx_bid > 0">
              <view class="f1">店铺名称</view>
              <view
                class="f2"
                @tap="goto"
                :data-url="'/pagesExt/business/index?id=' + lx_bid"
              >
                {{ lx_bname }}
                <image src="/static/img/arrowright.png" class="image" />
              </view>
            </view>
            <view class="row" v-if="lx_tel">
              <view class="f1">联系电话</view>
              <view
                class="f2"
                @tap="goto"
                :data-url="'tel::' + lx_tel"
                :style="{ color: t('color2') }"
              >
                {{ lx_tel }}
                <image
                  :src="static_url + '/static/img/copy.png'"
                  class="copyicon"
                  @tap.stop="copy"
                  :data-text="lx_tel"
                >
                </image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </block>

    <loading v-if="loading" loadstyle="left:62.5%"></loading>
    <dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
    <popmsg ref="popmsg"></popmsg>
  </view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
      opt: {},
      loading: false,
      isload: false,
      menuindex: -1,
      pagenum: 1,
      nomore: false,
      nodata: false,
      order: "",
      field: "",
      clist: [],
      curIndex: -1,
      curIndex2: -1,
      datalist: [],
      nodata: false,
      curCid: 0,
      proid: 0,
      buydialogShow: false,
      bid: "",

      showLinkStatus: false,
      lx_name: "",
      lx_bid: "",
      lx_tel: "",

      memberinfo: {},
      noreadstr: "",
      categoryimg: "",
      opttype: 0,
      tabflag: true,
      shopset: {},
      navBarTop: 0,
      statusBarHeight: 0,
      menuButtonInfo: null,
      customNavHeight: 0,
      customNavTop: 0,
      currentTab: 0,
      scrollLeft: 0,
      selectedItem: [],
      pre_url: app.globalData.pre_url,
      static_url: app.globalData.static_url,
      showPopup: false,
      shop_cid: "",
    };
  },

  onLoad: function (opt) {
    // #ifndef H5 || APP-PLUS || MP-ALIPAY
    // 获取系统信息和胶囊按钮位置信息
    const systemInfo = uni.getSystemInfoSync();
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();

    this.statusBarHeight = systemInfo.statusBarHeight;
    this.menuButtonInfo = menuButtonInfo;

    // 计算导航栏高度
    this.customNavHeight = menuButtonInfo.bottom + 8; // 底部加8px间距
    this.customNavTop = 0;
    // #endif

    this.opt = opt;

    if (opt.id) {
      this.opttype = opt.id;
    }
    switch (this.opttype) {
      case "0":
        this.tabflag = true;
        break;
      case "1":
        uni.setNavigationBarTitle({
          title: "品牌专区",
        });
        this.tabflag = false;
        break;
      default:
        this.tabflag = true;
        break;
    }
    this.getdata();
  },
  onPullDownRefresh: function () {
    this.getdata();
  },

  methods: {
    openshow() {
      this.showPopup = !this.showPopup;
    },
    toSales(item) {
      // const cid = this.curCid;
      let cid = item.rankcid;
      let proid = item.id;
      if (cid == null) {
        cid = "";
      }
      uni.navigateTo({
        url: `/pagesSocial/sales/index?cid=${cid}&proid=${proid}&type=1`,
      });
    },

    toTab(tid) {
      let that = this;
      let i = that.clist.findIndex((c) => c.id == tid);
      if (i != -1) {
        that.switchTab(that.clist[i], i);
        that.$forceUpdate();
      }
    },
    // 添加切换全部的方法
    switchAllTab() {
      this.currentTab = -1; // 使用-1表示全部选项
      this.curIndex = -1;
      this.curIndex2 = -1;
      this.nodata = false;
      this.pagenum = 1;
      this.datalist = [];
      this.nomore = false;

      // 设置cid为0表示获取全部分类数据
      this.curCid = 0;
      this.selectedItem = []; // 清空子分类列表

      this.getdatalist();
      this.showPopup = false;
    },
    switchTab(item, index) {
      this.currentTab = index;
      this.selectedItem = item.child;
      var id = item.id;
      this.curIndex = -1;
      this.curIndex2 = -1;
      this.nodata = false;
      this.curCid = id;
      this.pagenum = 1;
      this.datalist = [];
      this.nomore = false;
      // 计算滚动位置
      this.calculateScrollLeft(index);
      this.getdatalist();
      this.showPopup = false;
    },
    // 添加计算滚动位置的方法
    calculateScrollLeft(index) {
      const query = uni.createSelectorQuery();
      query.select(".nav-tabs").boundingClientRect();
      query.select(".tab-item").boundingClientRect();

      query.exec((res) => {
        if (res[0] && res[1]) {
          const tabsWidth = res[0].width; // 导航栏总宽度
          const itemWidth = res[1].width; // 单个tab的宽度
          const itemCount = this.clist.length; // tab总数

          // 计算目标滚动位置
          let targetScrollLeft =
            index * itemWidth - (tabsWidth - itemWidth) / 2;

          // 确保不会滚动到负值
          targetScrollLeft = Math.max(0, targetScrollLeft);

          // 确保不会滚动超出最大范围
          const maxScroll = itemWidth * itemCount - tabsWidth;
          targetScrollLeft = Math.min(targetScrollLeft, maxScroll);

          // 设置滚动位置
          this.scrollLeft = targetScrollLeft;
        }
      });
    },
    getdata: function () {
      var that = this;
      var nowcid = that.opt.cid;
      if (!nowcid) nowcid = "";
      that.pagenum = 1;
      that.datalist = [];
      that.loading = true;
      let url = "";

      switch (that.opttype) {
        case "0":
          url = "Shop/classify";
          break;
        case "1":
          url = "Shop/brand";
          break;
        default:
          url = "Shop/classify";
          break;
      }
      app.get(
        url,
        {
          needinit: 1,
          cid: nowcid,
          bid: that.bid,
        },
        function (res) {
          that.loading = false;
          var clist = res.data;
          that.clist = clist;

          // 初始化选中全部分类
          that.currentTab = -1;
          that.selectedItem = [];

          // 如果没有指定cid，则使用第一个分类的id
          if (!nowcid && clist && clist.length > 0) {
            that.curCid = clist[0].id;
          }

          // 如果有指定cid，查找对应的分类
          if (nowcid) {
            for (var i = 0; i < clist.length; i++) {
              if (clist[i]["id"] == nowcid) {
                that.curIndex = i;
                that.curCid = nowcid;
                that.selectedItem = clist[i].child || [];
                that.currentTab = i;
              }
              var downcdata = clist[i]["child"];
              var isget = 0;
              for (var j = 0; j < downcdata.length; j++) {
                if (downcdata[j]["id"] == nowcid) {
                  that.curIndex = i;
                  that.curIndex2 = j;
                  that.curCid = nowcid;
                  that.selectedItem = clist[i].child || [];
                  that.currentTab = i;
                  isget = 1;
                  break;
                }
              }
              if (isget) break;
            }
          }
          that.categoryimg = res._initdata.categoryimg;
          that.loaded();
          that.getdatalist();
          if (that.opt.tid) {
            that.toTab(that.opt.tid);
          }
        }
      );
    },

    getdatalist: function (loadmore) {
      if (!loadmore) {
        this.pagenum = 1;
        this.datalist = [];
      }
      var that = this;
      var pagenum = that.pagenum;
      var cid = that.curCid;
      var bid = that.opt.bid ? that.opt.bid : "";
      var order = that.order;
      var field = that.field;
      that.loading = true;
      that.nodata = false;
      that.nomore = false;
      var wherefield = {};
      wherefield.pagenum = pagenum;
      wherefield.field = field;
      wherefield.order = order;
      wherefield.bid = bid;

      // 如果是全部分类（currentTab === -1），则使用cid=0
      if (that.currentTab === -1) {
        // "全部"按钮
        if (that.curCid == 0) {
          wherefield.cid = 0;
        } else {
          // 左侧一级分类
          wherefield.cid = that.curCid;
        }
      } else if (bid > 0) {
        wherefield.cid2 = cid;
      } else {
        switch (that.opttype) {
          case "0":
            wherefield.cid = cid;
            break;
          case "1":
            wherefield.brandid = cid;
            break;
          default:
            wherefield.cid = cid;
            break;
        }
      }
      //如果设置过地域限制【定位模式下】
      var cachearea = app.getCache("user_current_area");
      var cachelongitude = app.getCache("user_current_longitude");
      var cachelatitude = app.getCache("user_current_latitude");
      if (cachearea) {
        wherefield.area = cachearea;
      }
      if (cachelongitude) {
        wherefield.latitude = cachelatitude;
        wherefield.longitude = cachelongitude;
      }

      app.post("Shop/getprolist", wherefield, function (res) {
        that.loading = false;
        uni.stopPullDownRefresh();

        var data = res.data;
        that.shopset = res.shopset;

        // 检查当前分类是否有数据
        if (data.length == 0) {
          // 如果是第一页，显示无数据提示
          if (pagenum == 1) {
            that.nodata = true;
          } else {
            // 显示上拉至下一个分类的提示
            that.nomore = true;
          }
        }

        var datalist = that.datalist;
        var newdata = datalist.concat(data);
        that.datalist = newdata;
        that.memberinfo = res.memberinfo;
      });
    },

    scrolltolower: function () {
      if (!this.nomore) {
        this.pagenum = this.pagenum + 1;
        this.getdatalist(true);
      } else {
        // 当显示"上拉至下一个分类"时，用户再次上拉则切换到下一个分类
        if (this.currentTab === -1) {
          // 在全部分类模式下
          if (this.curIndex === -1) {
            // 如果当前是"全部"，切换到第一个分类
            if (this.clist && this.clist.length > 0) {
              setTimeout(() => {
                this.switchRightTab({
                  currentTarget: {
                    dataset: {
                      index: 0,
                      id: this.clist[0].id,
                    },
                  },
                });
              }, 1000);
            }
          } else {
            // 如果当前是某个分类，切换到下一个分类
            let nextIndex = this.curIndex + 1;
            if (nextIndex < this.clist.length) {
              setTimeout(() => {
                this.switchRightTab({
                  currentTarget: {
                    dataset: {
                      index: nextIndex,
                      id: this.clist[nextIndex].id,
                    },
                  },
                });
              }, 1000);
            }
          }
        } else {
          // 原有逻辑：在具体分类模式下
          let currentCategoryIndex = this.currentTab;
          if (
            currentCategoryIndex !== -1 &&
            currentCategoryIndex < this.clist.length - 1
          ) {
            let nextCategory = this.clist[currentCategoryIndex + 1];
            setTimeout(() => {
              this.switchTab(nextCategory, currentCategoryIndex + 1);
            }, 1000);
          }
        }
      }
    },

    //改变子分类
    changeCTab: function (e) {
      var that = this;

      var id = e.currentTarget.dataset.id;
      var index = parseInt(e.currentTarget.dataset.index);

      this.curIndex2 = index;
      this.nodata = false;

      this.curCid = id;

      this.pagenum = 1;

      this.datalist = [];

      this.nomore = false;

      this.getdatalist();
    },

    //改变排序规则
    changeOrder: function (e) {
      var t = e.currentTarget.dataset;

      this.field = t.field;
      this.order = t.order;

      this.pagenum = 1;
      this.datalist = [];
      this.nomore = false;

      this.getdatalist();
    },

    //事件处理函数
    switchRightTab: function (e) {
      var that = this;
      var index = parseInt(e.currentTarget.dataset.index);
      var id = e.currentTarget.dataset.id;

      this.curIndex = index;
      this.curIndex2 = -1;
      this.nodata = false;

      // 如果在"全部分类"下
      if (this.currentTab === -1) {
        if (index === -1) {
          // 点击左侧"全部"，cid=0
          this.curCid = 0;
        } else {
          // 点击左侧某个一级分类，cid=该分类id
          this.curCid = id;
        }
      } else {
        // 原有逻辑
        if (index === -1 && this.clist[this.currentTab]) {
          this.curCid = this.clist[this.currentTab].id;
        } else {
          this.curCid = id;
        }
      }

      this.pagenum = 1;
      this.datalist = [];
      this.nomore = false;

      this.getdatalist();
    },
    buydialogChange: function (e) {
      if (!this.buydialogShow) {
        this.proid = e.currentTarget.dataset.proid;
      }
      this.buydialogShow = !this.buydialogShow;
    },
    showLinkChange: function (e) {
      var that = this;
      that.showLinkStatus = !that.showLinkStatus;
      that.lx_name = e.currentTarget.dataset.lx_name;
      that.lx_bid = e.currentTarget.dataset.lx_bid;
      that.lx_bname = e.currentTarget.dataset.lx_bname;
      that.lx_tel = e.currentTarget.dataset.lx_tel;
    },
  },
  computed: {
    // 处理后的列表
    processedList() {
      const result = [];
      this.datalist.forEach((item) => {
        result.push(item); // 插入当前项
        if (item.sceneopen == 1) {
          result.push({
            ...item,
            sceneopen: 0,
          }); // 插入新项
        }
      });
      return result;
    },
  },
};
</script>
<style lang="scss" scoped>
page {
  height: 100%;
  background-color: #efefef;
}

.container {
  width: 100%;
  height: 100vh;
  max-width: 640px;
  color: #939393;
  display: flex;
  flex-direction: column;
  position: relative;
}

.custom-nav {
  position: fixed;
  left: 0;
  right: 0;
  background-color: #ffffff;
  z-index: 999;
}

.search-container {
  display: flex;
  align-items: center;
  padding: 0 10rpx;
  width: 75%;
  box-sizing: border-box;
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  height: 62rpx;
  /* 调整搜索框高度 */
  border-radius: 28rpx;
  background-color: #f5f5f5;
  margin: 0 10rpx;
}

.search-box .img {
  width: 36rpx;
  height: 36rpx;
  margin: 0 10rpx 0 20rpx;
}

.search-box .search-text {
  font-size: 24rpx;
  color: #939393;
}

.content-container {
  margin-top: 180rpx;
  height: calc(100vh - 280rpx);
}

.content-container-box {
  flex: 1;
  height: calc(100% - 100rpx);
  display: flex;
  overflow: hidden;
}

/* #ifdef H5 */
.content-container {
  margin-top: 80rpx;
}

/* #endif */
.nav_left {
  width: 20%;
  /* height: calc(100% - 100rpx); */
  height: 100%;
  background: #f5f5f5;
  overflow-y: auto;
  position: relative;
}

.nav_left .nav_left_items {
  line-height: 50rpx;
  color: #333;
  // font-weight: bold;
  border-bottom: 0px solid #e6e6e6;
  font-size: 24rpx;
  position: relative;
  border-right: 0 solid #e6e6e6;
  padding: 25rpx 20rpx;
}

.nav_left .nav_left_items.active {
  background: #fff;
  color: #333;
  font-size: 24rpx;
  font-weight: bold;
}

.nav_left .nav_left_items .before {
  display: none;
  position: absolute;
  top: 50%;

  margin-top: -12rpx;
  left: 0;
  height: 24rpx;
  border-radius: 4rpx;
  width: 8rpx;
}

.nav_left .nav_left_items.active .before {
  display: block;
}

.nav_right {
  width: 80%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // background: #fff;
  box-sizing: border-box;
  padding: 0rpx 20rpx 0 20rpx;
}

.nav_right-content {
  height: 100%;
}

.nav-pai {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 18rpx;
  background-color: #fff;
  margin-bottom: 14rpx;
  margin-top: 14rpx;
  position: sticky;
  top: 0;
  z-index: 1;
  gap: 10rpx;
  /* 设置元素之间的间隔 */
}

.nav-paili {
  text-align: center;
  color: #323232;
  font-size: 24rpx;
  position: relative;
  height: 50rpx;
  line-height: 50rpx;
  // background-color: #f5f5f5;
  border-radius: 36rpx;
  flex: 1;
  /* 平均分配宽度 */
}

.nav-paili .iconshangla {
  position: absolute;
  top: -4rpx;
  padding: 0 6rpx;
  font-size: 20rpx;
  color: #7d7d7d;
}

.nav-paili .icondaoxu {
  position: absolute;
  top: 8rpx;
  padding: 0 6rpx;
  font-size: 20rpx;
  color: #7d7d7d;
}

.classify-ul {
  width: 100%;
  height: 80rpx;
  padding: 0 10rpx;
}

.classify-li {
  flex-shrink: 0;
  display: flex;
  background: #f5f6f8;
  border-radius: 22rpx;
  color: #6c737f;
  font-size: 20rpx;
  text-align: center;
  height: 44rpx;
  line-height: 44rpx;
  padding: 0 28rpx;
  margin: 12rpx 10rpx 12rpx 0;
}

.classify-box {
  flex: 1;
  overflow-y: auto;
  height: calc(100% - 94rpx);
  padding: 0 0 20rpx 0;
}

.classify-box .nav_right_items {
  width: 100%;
  border-bottom: 1px #f4f4f4 solid;
  padding: 16rpx 0;
  box-sizing: border-box;
  position: relative;
}

.product-itemlist {
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
}

.product-itemlist .item {
  width: 100%;
  /* height: 200rpx; */
  display: inline-block;
  position: relative;
  margin-bottom: 12rpx;
  background: #fff;
  display: flex;
  /* padding: 14rpx 0; */
  overflow: hidden;
  border-radius: 18rpx;
  border-bottom: 1px solid #f8f8f8;
}

.product-itemlist .product-pic {
  width: 35%;
  height: 0;
  overflow: hidden;
  background: #ffffff;
  padding-bottom: 35%;
  position: relative;
  border-radius: 4px;
  margin-left: 14rpx;
  margin-top: 14rpx;
}

.product-itemlist .product-pic .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.product-itemlist .product-pic .saleimg {
  position: absolute;
  width: 120rpx;
  height: auto;
  top: -6rpx;
  left: -6rpx;
}

.product-itemlist .product-info {
  width: 70%;
  padding: 14rpx 10rpx 5rpx 20rpx;
  position: relative;
}

.product-itemlist .product-info .p1 {
  color: #323232;
  font-weight: bold;
  font-size: 28rpx;
  line-height: 36rpx;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 72rpx;
}

.product-itemlist .product-info .p1-sp {
  color: #d46b08;
  font-weight: bold;
  font-size: 18rpx;
  line-height: 36rpx;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  width: 100%;
}

.p1-degree {
  font-size: 24rpx;
}

.product-itemlist .product-info .p22 {
}

.product-itemlist .product-info .p2 {
  /* margin-top: 10rpx; */
  height: 36rpx;
  line-height: 36rpx;
  overflow: hidden;
}

.product-itemlist .product-info .p2 .t1 {
  font-size: 32rpx;
}

.product-itemlist .product-info .p2 .t2 {
  font-size: 24rpx;
  color: #aaa;
}

.product-itemlist .product-info .p3 {
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: 5rpx;
  /* float: right; */
  position: absolute;
  // right: 15rpx;
  // bottom: 15rpx;
}

.product-itemlist .product-info .p3-1 {
  font-size: 18rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: right;
  color: #999;
}

.product-itemlist .product-info .p4 {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  position: absolute;
  display: relative;
  bottom: 6rpx;
  right: 4rpx;
  text-align: center;
}

.product-itemlist .product-info .p4 .icon_gouwuche {
  font-size: 32rpx;
  height: 56rpx;
  line-height: 56rpx;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  display: none;
  top: 20%;
  left: 20%;
}

.overlay .text {
  color: #fff;
  text-align: center;
  transform: translateY(100%);
}

.product-itemlist .soldout .product-pic .overlay {
  display: block;
}

.product-pic2 img {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  border-radius: 10%;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.lianxi {
  color: #fff;
  border-radius: 50rpx 50rpx;
  line-height: 50rpx;
  text-align: center;
  font-size: 22rpx;
  padding: 0 14rpx;
  display: inline-block;
  float: right;
}

.member {
  position: relative;
  border-radius: 8rpx;
  border: 1rpx solid #fd4a46;
  overflow: hidden;
  margin-top: 10rpx;
  box-sizing: content-box;
}

.member_lable {
  height: 100%;
  font-size: 22rpx;
  color: #fff;
  background: #fd4a46;
  padding: 0 10rpx;
}

.member_value {
  padding: 0 10rpx;
  font-size: 20rpx;
  color: #fd4a46;
}

.nav-img {
  width: 100%;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.nav-img image {
  width: 100%;
  height: 200rpx;
}

.nav-tabs-box {
  position: relative;
}

.nav-tabs {
  white-space: nowrap;
  background: #fff;
  padding: 0 20rpx 20rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .tab-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 120rpx;
    padding: 10rpx 0;
    overflow: hidden;

    .tab-icon {
      width: 100rpx;
      height: 100rpx;
      margin-bottom: 8rpx;
      border-radius: 50%;
    }

    .tab-text {
      font-size: 22rpx;
      border-radius: 36rpx;
      padding: 6rpx 10rpx;
      overflow: hidden;
      width: 110rpx;
      text-align: center;
    }
  }
}

.add-cart {
  display: flex;
  align-items: center;

  justify-content: center;

  width: 50rpx;

  height: 50rpx;

  border-radius: 50%;

  font-size: 36rpx;

  color: #fff;
}

.show-box {
  position: absolute;
  top: 0rpx;
  right: 0rpx;
  z-index: 99;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40rpx;
  height: 100%;
}

.show-box-flex {
  color: #333;
  font-size: 24rpx;
}

.show-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.show-img {
  width: 26rpx;
  height: 26rpx;
  margin-top: 6rpx;
}

.topref {
  background-color: #fff;
}

.popup-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  border-radius: 12rpx;
  z-index: 100;
  padding: 20rpx;
}

.popup-content {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.popup-item {
  width: calc((100% - 64rpx) / 5);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8rpx;
}

.popup-icon {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
}

.popup-text {
  font-size: 22rpx;
  color: #333;
  margin-top: 8rpx;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  border-radius: 36rpx;
  padding: 4rpx 10rpx;
}

.popup-bottom {
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 98;
}

.arrow-top {
  width: 30rpx;
  height: 30rpx;
  transform: rotate(180deg);
}

.coupon-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10rpx;
}

.coupon-item-box {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 8rpx;
  font-size: 24rpx;
  margin-top: 6rpx;
}

.coupon-left {
  padding-right: 6rpx;
  position: relative;
  flex-shrink: 0;
}

.coupon-left::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1rpx;
  height: 80%;
  border-right: 2rpx dashed #ccc;
}

.coupon-right {
  padding-left: 6rpx;
  flex-shrink: 0;
}

.p22-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6rpx;
  margin-bottom: 6rpx;
}

.bottom-list {
  font-size: 24rpx;
  display: flex;
  align-items: center;
  background-color: #fff7e6;
  padding: 4rpx 10rpx;
  width: fit-content;
  color: #666;
}

.bottom-list-text {
  margin: 0 6rpx;
}

.bottom-list-icon {
  width: 30rpx;
  height: 30rpx;
}
</style>
